<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>


<style type="text/css">
	*{
		text-align: center;
	}
	span{
		color:red;
	}
	
	a {
	width: 50px;
	height: 50px;
	display: inline-block;
	border-radius: 50%;
	background-color: orange;
	line-height: 50px;
	text-align: center;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
	color: white;
}
	#cart{
		position: fixed;
		left: 20px;
		top: 200px;
		border: 1px red solid;
		cursor: pointer;
	}
	#cart span{
		position: absolute;
		right: 0px;
		top: 0px;

	}

</style>
</head>
<body>
<h1>商品分页列表</h1>

<form action="${pageContext.request.contextPath}/findProdByPage" id="f1" method="post">
	商品名称: <input type="text" name="name" value="${param.name}"/>
	商品类型:
	<select name="typeid" id="s1">
	<option value="">请选择</option>
	</select>
	<input type="hidden" name="page" id="page1"/>
	<input type="hidden" name="size" value="5"/>
	<input type="button" onclick="submitForm(1)" value="条件查询">
</form>

<hr/>


<div id="cart" onclick="goCart()">
	<img src="${pageContext.request.contextPath}/image/cart.jpg" width="150">
	<span></span>
</div>



	<table border="0" width="100%" cellpadding="8px">
			
			<c:forEach items="${requestScope.page.list }" var="p">
				<tr align="center" height="260">
					<td valign="top" width="35%">
						<a href="${pageContext.request.contextPath }/prodInfo?id=${p.id}">
							<img src="${applicationScope.pic_url }${p.imgurls}" width="150"/>
						</a>
					</td>
					
					<td width="35%"><c:out value="${p.name }"></c:out><br/>
					<c:out value="${p.price }"></c:out><br/>
					<c:out value="${p.type }"></c:out><br/>
					</td>
					
					<td>
					<c:if test="${p.pnum > 0 }">
						<font color="blue">有货</font>
					</c:if>
					<c:if test="${p.pnum <= 0 }">
						<font color="red">无货</font>
					</c:if>
					</td>

					<td>
						<button onclick="jiaru(${p.id})">加入购物车</button>
					</td>
				</tr>
				
				<tr> <td colspan="3"><hr/></td></tr>
				
			</c:forEach>
		</table>


<p style="text-align: center;">
	共${page.total}条记录 共${page.last}页

	<a href="javaScript:void(0)" onclick="submitForm('1')">首页</a>
	<a href="javaScript:void(0)" onclick="submitForm('${page.prve}')">上一页</a>


	<%----${page.curpage}----%>


	<c:forEach begin="${page.start}" end="${page.end}" step="1" var="shu">
		<c:if test="${page.page == shu}">
			--${shu}--
		</c:if>
		<c:if test="${page.page != shu}">
			<a href="javaScript:void(0)" onclick="submitForm('${shu}')">${shu}</a>
		</c:if>

	</c:forEach>


	<a href="javaScript:void(0)" onclick="submitForm('${page.next}')">下一页</a>
	<a href="javaScript:void(0)" onclick="submitForm('${page.last}')">尾页</a>

</p>
	

	

</body>

<script src="js/jquery-1.12.4.js"></script>

<script>

	function goCart() {
		location.href = "${pageContext.request.contextPath}/cart/cartList"
	}


	getCartPrice();
	function getCartPrice() {
		//ajax 请求, 访问后台,返回 当前用户购物车中所有商品的总价
		$.getJSON("${pageContext.request.contextPath}/cart/totalPrice",function (result) {
			if(result.code == 200){
				$("#cart span").text("¥"+result.message);
			}
		})
	}






	function jiaru(id){
		//
		$.post("${pageContext.request.contextPath}/cart/addCartAjax",{"prodid":id},function (result) {
			//
			if(result.code == 200){
				//修改界面
				getCartPrice();
				alert("加入购物车成功!!!");
			}
		},"json")
	}

	$.post("${pageContext.request.contextPath}/types",function(result){
		if(result.code == 200){
			for(var i = 0;i<result.obj.length;i++){
				var  type = result.obj[i];
				if(type.id == '${param.typeid}' ){
					$("#s1").append('<option selected value="'+type.id+'">'+type.name+'</option>');
				}else{
					$("#s1").append('<option value="'+type.id+'">'+type.name+'</option>');
				}

			}
		}
	},"json")


			//点击条件查询 或者 页面会执行
	function submitForm(page) {
//给页码赋值
			$("#page1").val(page);

		//提交表单
		$("#f1").submit();

	}

</script>
</html>